<!DOCTYPE html>
<html lang="en" class="noscroll">

<head>
  <%=require('html-loader!./layout/head-common.html') %>
    <title>登录注册</title>
</head>

<body>
  <div id="wrap">
    <div class="bk1"></div>
    <div class="bk2"></div>
    <div class="bk3"></div>
  </div>
  <main class="container-fluid">
    <div class="wp1 content container-fluid">
      <div class="row">
        <div class="col-4 d-md-block d-none sidePic">

        </div>
        <div class="col-lg-8 col-12">
          <div class="card border-0">
            <div class="card-header border-0">
              <span href="#" class="middleControl">登录</span>
              <span href="#" class="leftControl active">注册-普通用户</span>
              <span href="#" class="rightControl">注册-心理咨询师</span>
            </div>
            <div class="card-body">
              <!-- 普通用户注册 -->
              <form action="#" id="registNormalForm">
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalUsername">用户名</label>
                    <input type="text" name="registNormalUsername" id="registNormalUsername" placeholder="请输入您的用户名" class="form-control" required>
                    <small class="server-feedback text-danger d-none">这里是服务器返回的错误信息</small>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalPhone">手机号</label>
                    <input type="number" name="registNormalPhone" id="registNormalPhone" placeholder="请输入您的手机号" class="form-control" required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalPassword">密码</label>
                    <input type="password" name="registNormalPassword" id="registNormalPassword" placeholder="请输入您的密码" class="form-control" required>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalRePassword">密码验证</label>
                    <input type="password" id="registNormalRePassword" name="registNormalRePassword" placeholder="请再次输入您的密码" class="form-control"
                      required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalQuestion">验证问题</label>
                    <input type="text" name="registNormalQuestion" id="registNormalQuestion" placeholder="请输入一个用于验证本人的问题" class="form-control"
                      required>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalAnswer">验证答案</label>
                    <input type="text" name="registNormalAnswer" id="registNormalAnswer" placeholder="请输入问题的答案" class="form-control" required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-12">
                    <label for="registNormalEmail">邮箱</label>
                    <input type="email" name="registNormalEmail" id="registNormalEmail" placeholder="请输入您的邮箱用于验证注册" class="form-control" required>
                    <small class="server-feedback text-danger d-none">这里是服务器返回的错误信息</small>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registNormalVerification">验证码</label>
                    <input type="text" name="registNormalVerification" id="registNormalVerification" placeholder="请输入验证码" class="form-control"
                      required>
                  </div>
                  <div class="form-group col-md-6 col-12 verifiCont">
                    <div class="registNormalVerifi verifi text-center">
                      点击生成验证码
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-12">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="readPropNormal" id="readProp" required>
                      <label class="form-check-label" for="readPropNormal">
                        我已阅读并同意
                        <a href="#">用户注册须知</a>
                      </label>
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-12">
                    <small class="server-feedback text-danger d-none" id="normal-err-msg">这里是服务器返回的错误信息</small>
                    <div class="btn-group pull-right" role="group">
                      <input type="reset" class="btn btn-link text-muted"></input>
                      <input type="submit" class="btn disabled" disabled value="提交" id="registNormalSubmit"></input>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wp2 content container-fluid">
      <div class="row">
        <div class="col-lg-8 col-12">
          <div class="card border-0">
            <div class="card-header border-0">
              <span href="#" class="middleControl active">登录</span>
              <span href="#" class="leftControl">注册-普通用户</span>
              <span href="#" class="rightControl">注册-心理咨询师</span>
            </div>
            <div class="card-body">
              <!-- 用户登录 -->
              <form id="logInForm" action="#">
                <div class="form-row">
                  <div class="form-group  col-md-6 col-12">
                    <label for="logInUsername">用户名</label>
                    <input type="text" id="logInUsername" name="username" placeholder="请输入您的用户名" class="form-control" required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group  col-md-6 col-12">
                    <label for="logInPassword">密码</label>
                    <input type="password" id="logInPassword" name="password" placeholder="请输入您的密码" class="form-control" required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group  col-md-6 col-12">
                    <label for="logInVerification">验证码</label>
                    <input type="text" id="logInVerification" name="logInVerification" placeholder="请输入验证码" class="form-control" required>
                  </div>
                  <div class="form-group col-md-6 col-12 verifiCont">
                    <div class="logInVerifi verifi text-center">
                      点击生成验证码
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-12">
                    <small class="server-feedback text-danger d-none" id="login-err-msg">这里是服务器返回的错误信息</small>
                    <div class="btn-group pull-right" role="group">
                      <input type="reset" class="btn btn-link text-muted"></input>
                      <input type="submit" class="btn login-btn disabled" disabled value="提交"></input>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-md-4 d-md-block d-none sidePic">

        </div>
      </div>
    </div>
    <div class="wp3 content container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card border-0">
            <div class="card-header border-0">
              <span href="#" class="middleControl">登录</span>
              <span href="#" class="leftControl">注册-普通用户</span>
              <span href="#" class="rightControl active">注册-心理咨询师</span>
            </div>
            <div class="card-body">
              <!-- 心理咨询师注册 -->
              <form id="registDoctorForm" onsubmit="return false;">
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorUsername">用户名</label>
                    <input type="text" name="user.username" id="registDoctorUsername" placeholder="请输入您的用户名" class="form-control" required>
                    <small class="server-feedback text-danger d-none">这里是服务器返回的错误信息</small>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorPhone">手机号</label>
                    <input type="number" name="user.phone" id="registDoctorPhone" placeholder="请输入您的手机号" class="form-control" required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorPassword">密码</label>
                    <input type="password" name="user.password" id="registDoctorPassword" placeholder="请输入您的密码" class="form-control" required>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorRePassword">密码验证</label>
                    <input type="password" id="registDoctorRePassword" name="registDoctorRePassword" placeholder="请再次输入您的密码" class="form-control"
                      required>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-12">
                    <label for="registDoctorEmail">邮箱</label>
                    <input type="email" name="user.email" id="registDoctorEmail" placeholder="请输入您的邮箱以通知您审核通过" class="form-control" required>
                    <small class="server-feedback text-danger d-none">这里是服务器返回的错误信息
                    </small>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorName">真实姓名</label>
                    <input type="text" name="psychologist.realname" id="registDoctorName" placeholder="请输入您的真实姓名" class="form-control" required>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorSex" id="sexLabel">性别</label>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input inlineRadio" type="radio" name="psychologist.sex" checked id="inlineRadio1" value="0">
                      <label class="form-check-label" for="inlineRadio1">男</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input inlineRadio" type="radio" name="psychologist.sex" id="inlineRadio2" value="1">
                      <label class="form-check-label" for="inlineRadio2">女</label>
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorId">身份证号</label>
                    <input type="text" name="psychologist.identity" id="registDoctorId" placeholder="请输入您的身份证号" class="form-control" required>
                    <small class="server-feedback text-danger d-none">这里是服务器返回的错误信息
                    </small>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label class="mr-sm-2" for="registDoctorEducation">学历</label>
                    <select name="psychologist.education" id="registDoctorEducation" class="form-control" required>
                      <option></option>
                      <option value="专科">专科</option>
                      <option value="本科">本科</option>
                      <option value="硕士">硕士</option>
                      <option value="博士">博士</option>
                    </select>
                  </div>
                </div>
                <div class="form-row">
                  <div class="col-md-6 col-12">
                    <label form="registDoctorLocation">所在城市</label>
                    <div id="demo3" class="citys">
                      <p>
                        <select name="province" class="province">
                        </select>
                        <select name="city" class="city"></select>
                        <select name="area" class="area"></select>
                        <select name="town" class="town"></select>
                      </p>
                    </div>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorLevel">专业资质</label>
                    <select name="psychologist.level" id="registDoctorLevel" class="form-control" required>
                      <option></option>
                      <option value="0">二级心理咨询师</option>
                      <option value="1">三级心理咨询师</option>
                      <option value="2">心理治疗师</option>
                      <option value="3">家庭系统排列指导师</option>
                      <option value="4">催眠治疗师</option>
                      <option value="5">心理学专业本科</option>
                      <option value="6">心理学专业研究生</option>
                      <option value="7">心理学专业博士</option>
                    </select>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorIdFront">身份证正面照片</label>
                    <input type="file" name="upload_file" id="registDoctorIdFront" class="d-block">
                    <div class="showImg d-none" id="doctorIdFrontshowImg">
                      <!-- 照片图片 -->
                      <img src="" alt="">
                    </div>
                  </div>
                  <div class="form-group col-md-6 col-12">
                    <label for="registDoctorIdBack">身份证反面照片</label>
                    <input name="upload_file" id="registDoctorIdBack" type="file" class="d-block">
                    <div class="showImg d-none" id="doctorIdBackshowImg">
                      <!-- 照片图片 -->
                      <img src="" alt="">
                    </div>
                  </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6 col-12">
                      <label for="registDoctorCertifiPic">心理咨询师证照片</label>
                      <input name="upload_file" id="registDoctorCertifiPic" type="file" class="d-block">
                      <div class="showImg d-none" id="doctorCertifiPicshowImg">
                        <!-- 照片图片 -->
                        <img src="" alt="">
                      </div>
                    </div>
                    <div class="form-group col-md-6 col-12">
                      <label for="registDoctorHeadPic">上传头像</label>
                      <input name="upload_file" id="registDoctorHeadPic" type="file" class="d-block" required>
                      <div class="showImg d-none" id="doctorHeadPicshowImg">
                        <!-- 照片图片 -->
                        <img src="" alt="">
                      </div>
                    </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-12">
                    <label for="registDoctorDescribe">个人简介</label>
                    <textarea name="registDoctorDescribe" id="registDoctorDescribe" placeholder="包括从业背景、行业经历等" class="form-control" required></textarea>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group  col-md-6 col-12">
                    <label for="registDoctorVerification">验证码</label>
                    <input type="text" id="registDoctorVerification" name="registDoctorVerification" placeholder="请输入验证码" class="form-control"
                      required value="">
                  </div>
                  <div class="form-group col-md-6 col-12 verifiCont">
                    <div class="logInVerifi verifi text-center">
                      点击生成验证码
                    </div>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-12">
                    <div class="form-check">
                      <input class="form-check-input" value="" type="checkbox" name="readPropDoctor" id="readPropDoctor" required>
                      <label class="form-check-label" for="readPropDoctor">
                        我已阅读并同意
                        <a href="#">用户注册须知</a>
                      </label>
                    </div>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-12">
                    <small class="server-feedback text-danger d-none" id="doctor-err-msg">这里是服务器返回的错误信息
                    </small>
                    <div class="btn-group pull-right" role="group">
                      <input type="reset" class="btn btn-link text-muted"></input>
                      <input type="submit" class="btn " value="提交" id="registDoctorSubmit"></input>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

  <script>
    /**
 * jquery.citys.js 1.0
 * http://jquerywidget.com
 */
    ; (function (factory) {
      if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
        // AMD或CMD
        define(["jquery"], factory);
      } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function (root, jQuery) {
          if (jQuery === undefined) {
            if (typeof window !== 'undefined') {
              jQuery = require('jquery');
            } else {
              jQuery = require('jquery')(root);
            }
          }
          factory(jQuery);
          return jQuery;
        };
      } else {
        //Browser globals
        factory(jQuery);
      }
    }(function ($) {
      $.support.cors = true;
      $.fn.citys = function (parameter, getApi) {
        if (typeof parameter == 'function') { //重载
          getApi = parameter;
          parameter = {};
        } else {
          parameter = parameter || {};
          getApi = getApi || function () { };
        }
        var defaults = {
          dataUrl: 'http://passer-by.com/data_location/list.json',     //数据库地址
          dataType: 'json',          //数据库类型:'json'或'jsonp'
          provinceField: 'province', //省份字段名
          cityField: 'city',         //城市字段名
          areaField: 'area',         //地区字段名
          valueType: 'code',         //下拉框值的类型,code行政区划代码,name地名
          code: 0,                   //地区编码
          province: 0,               //省份,可以为地区编码或者名称
          city: 0,                   //城市,可以为地区编码或者名称
          area: 0,                   //地区,可以为地区编码或者名称
          required: true,           //是否必须选一个
          nodata: 'hidden',         //当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理
          onChange: function () { }     //地区切换时触发,回调函数传入地区数据
        };
        var options = $.extend({}, defaults, parameter);
        return this.each(function () {
          //对象定义
          var _api = {};
          var $this = $(this);
          var $province = $this.find('select[name="' + options.provinceField + '"]'),
            $city = $this.find('select[name="' + options.cityField + '"]'),
            $area = $this.find('select[name="' + options.areaField + '"]');
          $.ajax({
            url: options.dataUrl,
            type: 'GET',
            crossDomain: true,
            dataType: options.dataType,
            jsonpCallback: 'jsonp_location',
            success: function (data) {
              var province, city, area, hasCity;
              if (options.code) {   //如果设置地区编码，则忽略单独设置的信息
                var c = options.code - options.code % 1e4;
                if (data[c]) {
                  options.province = c;
                }
                c = options.code - (options.code % 1e4 ? options.code % 1e2 : options.code);
                if (data[c]) {
                  options.city = c;
                }
                c = options.code % 1e2 ? options.code : 0;
                if (data[c]) {
                  options.area = c;
                }
              }
              var updateData = function () {
                province = {}, city = {}, area = {};
                hasCity = false;       //判断是非有地级城市
                for (var code in data) {
                  if (!(code % 1e4)) {     //获取所有的省级行政单位
                    province[code] = data[code];
                    if (options.required && !options.province) {
                      if (options.city && !(options.city % 1e4)) {  //省未填，并判断为直辖市
                        options.province = options.city;
                      } else {
                        options.province = code;
                      }
                    } else if (data[code].indexOf(options.province) > -1) {
                      options.province = isNaN(options.province) ? code : options.province;
                    }
                  } else {
                    var p = code - options.province;
                    if (options.province && p > 0 && p < 1e4) {    //同省的城市或地区
                      if (!(code % 100)) {
                        hasCity = true;
                        city[code] = data[code];
                        if (data[code].indexOf(options.city) > -1) {
                          options.city = isNaN(options.city) ? code : options.city;
                        }
                      } else if (p > 9000) {                   //省直辖县级行政单位
                        city[code] = data[code];
                        if (data[code].indexOf(options.city) > -1) {
                          options.city = isNaN(options.city) ? code : options.city;
                        }
                      } else if (hasCity) {                  //非直辖市
                        var c = code - options.city;
                        if (options.city && c > 0 && c < 100) {     //同个城市的地区
                          area[code] = data[code];
                          if (data[code].indexOf(options.area) > -1) {
                            options.area = isNaN(options.area) ? code : options.area;
                          }
                        }
                      } else {
                        area[code] = data[code];            //直辖市
                        if (data[code].indexOf(options.area) > -1) {
                          options.area = isNaN(options.area) ? code : options.area;
                        }
                      }
                    }
                  }
                }
              };
              var format = {
                province: function () {
                  $province.empty();
                  if (!options.required) {
                    $province.append('<option value=""> - 请选择 - </option>');
                  }
                  for (var i in province) {
                    $province.append('<option value="' + (options.valueType == 'code' ? i : province[i]) + '" data-code="' + i + '">' + province[i] + '</option>');
                  }
                  if (options.province) {
                    var value = options.valueType == 'code' ? options.province : province[options.province];
                    $province.val(value);
                  }
                  this.city();
                },
                city: function () {
                  $city.empty();
                  if (!hasCity) {
                    $city.css('display', 'none');
                  } else {
                    $city.css('display', '');
                    if (!options.required) {
                      $city.append('<option value=""> - 请选择 - </option>');
                    }
                    if (options.nodata == 'disabled') {
                      $city.prop('disabled', $.isEmptyObject(city));
                    } else if (options.nodata == 'hidden') {
                      $city.css('display', $.isEmptyObject(city) ? 'none' : '');
                    }
                    for (var i in city) {
                      $city.append('<option value="' + (options.valueType == 'code' ? i : city[i]) + '" data-code="' + i + '">' + city[i] + '</option>');
                    }
                    if (options.city) {
                      var value = options.valueType == 'code' ? options.city : city[options.city];
                      $city.val(value);
                    } else if (options.area) {
                      var value = options.valueType == 'code' ? options.area : city[options.area];
                      $city.val(value);
                    }
                  }
                  this.area();
                },
                area: function () {
                  $area.empty();
                  if (!options.required) {
                    $area.append('<option value=""> - 请选择 - </option>');
                  }
                  if (options.nodata == 'disabled') {
                    $area.prop('disabled', $.isEmptyObject(area));
                  } else if (options.nodata == 'hidden') {
                    $area.css('display', $.isEmptyObject(area) ? 'none' : '');
                  }
                  for (var i in area) {
                    $area.append('<option value="' + (options.valueType == 'code' ? i : area[i]) + '" data-code="' + i + '">' + area[i] + '</option>');
                  }
                  if (options.area) {
                    var value = options.valueType == 'code' ? options.area : area[options.area];
                    $area.val(value);
                  }
                }
              };
              //获取当前地理信息
              _api.getInfo = function () {
                var status = {
                  direct: !hasCity,
                  province: data[options.province] || '',
                  city: data[options.city] || '',
                  area: data[options.area] || '',
                  code: options.area || options.city || options.province
                };
                return status;
              };
              //事件绑定
              $province.on('change', function () {
                options.province = $(this).find('option:selected').data('code') || 0; //选中节点的区划代码
                options.city = 0;
                options.area = 0;
                updateData();
                format.city();
                options.onChange(_api.getInfo());
              });
              $city.on('change', function () {
                options.city = $(this).find('option:selected').data('code') || 0; //选中节点的区划代码
                options.area = 0;
                updateData();
                format.area();
                options.onChange(_api.getInfo());
              });
              $area.on('change', function () {
                options.area = $(this).find('option:selected').data('code') || 0; //选中节点的区划代码
                options.onChange(_api.getInfo());
              });
              //初始化
              updateData();
              format.province();
              if (options.code) {
                options.onChange(_api.getInfo());
              }
              getApi(_api);
            }
          });
        });
      };
    }));

  </script>

</body>

</html>